<template>
	<view>
		<page-head :title="'个人中心'" :headtype="1" :bg="`transparent`"></page-head>
		<view class="topblock">
			<image class="topbg" :src="apifun.serveimg + 'statisticsbg.png'" mode=""></image>
			<view class="topmain" :style="{'top':statusheadheight+'px'}">
				<view class="usermsg flex">
					<view class="headimg" @click="uploadhead('avatar')">
						<image v-if="!usermsg.avatar" :src="apifun.serveimg + 'headimg.png'" mode=""></image>
						<image v-if="usermsg.avatar" :src="apifun.URLimg + avatar" mode=""></image>
					</view>
					<view class="headmsg">
						<view class="headmsgname flex" @click="$refs.companypopup.open()">
							<text style="margin-right: 20rpx;">{{ usermsg.company_name }}</text>
							<uv-icon name="arrow-down-fill" color="#333333" size="14"></uv-icon>
						</view>
						<view class="headmsgphone">{{ usermsg.mobile }}</view>
					</view>
				</view>
				<view class="protadmin marginAuto">
					<view class="prottitle" @click="apifun.navigate('/pages/usermy/protadmin')">报单管理</view>
					<view class="statisnum flex">
						<view class="statiseach" @click="apifun.navigate('/pages/usermy/protadmin','index=1')">
							<view class="statisnumd">{{ usermsg.wait_assign }}</view>
							<view class="statisnumt">待分配</view>
						</view>
						<view class="statiseach" @click="apifun.navigate('/pages/usermy/protadmin','index=2')">
							<view class="statisnumd">{{ usermsg.wait_audit }}</view>
							<view class="statisnumt">待审核</view>
						</view>
						<view class="statiseach" @click="apifun.navigate('/pages/usermy/protadmin','index=3')">
							<view class="statisnumd">{{ usermsg.has_assign }}</view>
							<view class="statisnumt">已分配</view>
						</view>
						<view class="statiseach" @click="apifun.navigate('/pages/usermy/protadmin','index=4')">
							<view class="statisnumd">{{ usermsg.has_cancel }}</view>
							<view class="statisnumt">已取消</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view :style="{'padding-top':statusheadheight+'px'}">
			<view class="mylist marginAuto" style="margin-top:370rpx;">
				<view class="item flex" @click="apifun.navigate('/pages/usermy/mymsg')">
					<view class="itemmsg flex">
						<view class="itemmsgimg fl">
							<image src="@/static/icon/my1.png" mode=""></image>
						</view>
						<view class="itemmsgtitle">个人信息</view>
					</view>
					<view class="itemicon">
						<uv-icon name="arrow-right" color="#999999" size="20"></uv-icon>
					</view>
				</view>
				<view class="item flex" @click="apifun.navigate('/pages/usermy/xgpass')">
					<view class="itemmsg flex">
						<view class="itemmsgimg fl">
							<image src="@/static/icon/my2.png" mode=""></image>
						</view>
						<view class="itemmsgtitle">密码设置</view>
					</view>
					<view class="itemicon">
						<uv-icon name="arrow-right" color="#999999" size="20"></uv-icon>
					</view>
				</view>
				<view class="item flex" @click="apifun.navigate('/pages/usermy/businesslist')">
					<view class="itemmsg flex">
						<view class="itemmsgimg fl">
							<image src="@/static/icon/my3.png" mode=""></image>
						</view>
						<view class="itemmsgtitle">企业账号</view>
					</view>
					<view class="itemicon">
						<uv-icon name="arrow-right" color="#999999" size="20"></uv-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:40rpx;">
			<uv-button text="退出登录" @click="quitfun()" :customStyle="{
				'background':'#2340FF',
				'color':'#fff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'20rpx'
			}"></uv-button>
		</view>
		<uv-picker ref="companypopup"
		v-if="companydata.length > 0" 
		:columns="companydata" keyName="company_name" 
		 @confirm="companyconfirm"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusheadheight: uni.getStorageSync('ClientRectTop') + uni.getStorageSync('ClientRectHeight'),
				apifun: this.apifun,
				usermsg:{},
				avatar:'',
				companydata:[[]]
			};
		},
		onLoad() {
			this.usermsgfun();
			this.companyList();
		},
		methods: {
			usermsgfun(){
				this.apifun.unirequest('/user/user/getUserInfo','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.usermsg = datas;
						this.avatar = datas.avatar;
						uni.setStorageSync('usermsg',datas);
					}else{
						this.apifun.toast(res.msg)
					}
				},true)
			},
			companyList(){
				this.apifun.unirequest('/user/company/getCompanyList','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						let companydata = [];
						datas.forEach((item,index)=>{
							if(item.pid == 0){
								this.companyobj = item;
							}
							if(item.status == 2){
								companydata.push(item)
							}
						});
						this.companydata[0] = companydata;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			companyconfirm(e){
				this.apifun.unirequest('/common/user/setLoginCompany','post',{company_id:e.value[0].id},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.usermsg.company_name = e.value[0].company_name;
						this.usermsgfun()
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			uploadhead(name){
				this.apifun.uploadFileimg((res)=>{
					if(res.code == 200){
						this[name] = res.data.src;
						this.apifun.unirequest('/common/user/setUserAvatar','post',{
							avatar:res.data.src
						},(res)=>{
							if(res.code === 200){
								let datas = res.data;
							}else{
								this.apifun.toast(res.msg)
							}
						})
					}
				},this)
			},
			quitfun(){
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success: function (res) {
						if (res.confirm) {
							let ClientRect = uni.getStorageSync('ClientRect');
							let ClientRectTop = uni.getStorageSync('ClientRectTop');
							let ClientRectHeight = uni.getStorageSync('ClientRectHeight');
							uni.clearStorageSync();
							uni.setStorageSync('ClientRect', ClientRect);
							uni.setStorageSync('ClientRectTop', ClientRectTop);
							uni.setStorageSync('ClientRectHeight', ClientRectHeight);
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/start/login'
								})
							},300)
						} else if (res.cancel) {}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #FAFAFA;
		padding-bottom:50rpx;
	}
	.topbg {
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		width: 100%;
		height: 470rpx;
	}
	.topmain {
		position: fixed;
		width: 690rpx;
		left: 50%;
		margin-left: -345rpx;
		z-index: 20;
		.usermsg{
			margin-top: 30rpx;
			.headimg{
				width: 112rpx;
				height: 112rpx;
				image{
					width: 112rpx;
					height: 112rpx;
					border-radius: 100rpx;
				}
			}
			.headmsg{
				margin-left: 20rpx;
				line-height: 50rpx;
				.headmsgname{
					margin-top: 10rpx;
					font-size: 30rpx;
					color: #333333;
				}
				.headmsgphone{
					font-size:28rpx;
					color:#666666;
				}
			}
		}
		.protadmin{
			width: 650rpx;
			padding: 20rpx;
			background-color: #fff;
			margin-top: 28rpx;
			border-radius: 10rpx;
			.prottitle{
				font-size: 30rpx;
				color: #333333;
				line-height: 50rpx;
				font-weight: 600;
			}
			.statisnum{
				flex: 1;
				padding:40rpx 10rpx;
				background-color: #F6F9FF;
				border-radius: 10rpx;
				margin-top: 30rpx;
				justify-content: space-between;
				.statiseach{
					width: 25%;
					text-align: center;
					.statisnumd{
						color: #333333;
						font-size: 32rpx;
						font-weight: 600;
					}
					.statisnumt{
						color:#666666;
						font-size:28rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
	.mylist{
		width: 630rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.item{
			padding: 34rpx 0;
			justify-content: space-between;
			border-bottom: 1px solid #F4F4F4;
			.itemmsg{
				.itemmsgimg{
					width: 40rpx;
					height: 40rpx;
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
				.itemmsgtitle{
					line-height: 40rpx;
					font-size: 30rpx;
					color: #333333;
					margin-left: 10rpx;
					font-weight: 600;
				}
			}
		}
	}
</style>